/**
* ClassName: Orders
* Package: src/views
* Description: 确认订单页面
*
* @Author Liu Wenrui
* @Create 2025/9/24 16:00
* @Version 1.0
*
* @Author Liu Wenrui
* @Create 2025/9/26 11:00
* @Version 1.1
*/


<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <span class="back-btn" @click="goBack">&#8592;</span>
            <p>确认订单</p>
        </header>
        <!-- 订单信息部分 -->
        <div class="order-info">
            <h5>订单配送至：</h5>
            <div class="order-info-address" @click="toUserAddress">
                <p>{{ deliveryaddress != null ? deliveryaddress.address : '请选择送货地址' }}</p>
                <i class="fa fa-angle-right"></i>
            </div>
            <div v-if="deliveryaddress && deliveryaddress.contactName" style="margin-top: 1vw; font-size: 3.5vw;">
                收货人：{{ deliveryaddress.contactName }}{{ deliveryaddress.contactSex == 1 ? '先生' : '女士' }} {{
                    deliveryaddress.contactTel }}
            </div>
        </div>
        <h3>{{ business.businessName }}</h3>
        <!-- 订单明细部分 -->
        <ul class="order-detailed">
            <li v-for="item in cartArr">
                <div class="order-detailed-left">
                    <img :src="getImg(getFoodInfo(item.foodId).foodImg)">
                    <div style="margin-left: 2vw;">
                        <p>{{ getFoodInfo(item.foodId).foodName }}</p>
                        <p>{{ item.foodPrice }} x {{ item.quantity }}</p>
                    </div>
                </div>
                <p>&#165;{{ (item.foodPrice * item.quantity).toFixed(2) }}</p>
            </li>
        </ul>
        <div class="order-deliveryfee">
            <p>配送费</p>
            <p>&#165;{{ business.deliveryPrice }}</p>
        </div>
        <div v-if="showAddressDialog" class="address-dialog-mask" @click.self="showAddressDialog = false">
            <div class="address-dialog">
                <h3>选择送货地址</h3>
                <ul v-if="addressList.length">
                    <li v-for="addr in addressList" :key="addr.id" @click="selectAddress(addr)" class="address-item">
                        <div class="address-main">{{ addr.address }}</div>
                        <div class="address-contact">
                            <span>{{ addr.contactName }}</span>
                            <span style="margin-left: 2vw;">{{ addr.contactTel }}</span>
                        </div>
                    </li>
                </ul>
                <p v-else class="address-empty">暂无地址</p>
                <div class="dialog-actions">
                    <button @click="toAddAddress" class="dialog-btn">新增地址</button>
                    <button @click="showAddressDialog = false" class="dialog-btn secondary">关闭</button>
                </div>
            </div>
        </div>
        <!-- 合计部分 -->
        <div class="total">
            <div class="total-left">
                &#165;{{ totalPrice }}
            </div>
            <div class="total-right" @click="toPayment">
                去支付
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Orders',
    data() {
        return {
            businessId: this.$route.query.businessId,
            business: {},
            customer: {},
            cartArr: [],
            deliveryaddress: null,
            foodList: [],
            showAddressDialog: false, // 控制弹窗显示
            addressList: []           // 地址列表
        }
    },
    created() {
        this.$axios.get("/user")
            .then(response => {
                this.customer = response.data;
                this.deliveryaddress = null;
            }).catch(error => {
                console.error(error);
            });
        this.deliveryaddress = this.$getLocalStorage(this.customer.userId);
        //查询当前商家
        this.$axios.get(`/businesses/public/${this.businessId}`)
            .then(response => {
                this.business = response.data.data;
            }).catch(error => {
                console.error(error);
            });
        //查询当前用户在购物车中的当前商家食品列表
        this.$axios.get(`/carts/by-business/${this.businessId}`)
            .then(response => {
                const rawArr = response.data.data;
                // 合并相同 foodId 的购物项
                const merged = [];
                const map = {};
                for (const item of rawArr) {
                    const key = item.foodId;
                    if (map[key]) {
                        map[key].quantity += item.quantity;
                    } else {
                        map[key] = { ...item };
                        merged.push(map[key]);
                    }
                }
                this.cartArr = merged;
                console.log(this.cartArr);
                console.log(this.business);
            }).catch(error => {
                console.error(error);
            });

        this.$axios.get(`/foods/public/business/${this.businessId}`)
            .then(response => {
                this.foodList = response.data.data;
            }).catch(error => {
                console.error(error);
            });
    },
    computed: {
        totalPrice() {
            let totalPrice = 0;
            for (let cartItem of this.cartArr) {
                totalPrice += cartItem.foodPrice * 100 * cartItem.quantity;
            }
            totalPrice += this.business.deliveryPrice * 100;
            return (totalPrice / 100).toFixed(2);
        }
    },
    filters: {
        sexFilter(value) {
            return value == 1 ? '先生' : '女士';
        }
    },
    methods: {
        getImg(img) {
            if (img && (img.startsWith('http://') || img.startsWith('https://'))) {
                return img;
            }
            try {
                return require('../assets/' + img);
            } catch (e) {
                return require('../assets/default.png');
            }
        },
        goBack() {
            this.$router.back();
        },
        getFoodInfo(foodId) {
            return this.foodList.find(f => f.id === foodId) || {};
        },
        toUserAddress() {
            // 打开弹窗并加载地址列表
            this.showAddressDialog = true;
            this.$axios.get(`/addresses`, { params: { user: this.customer.id } })
                .then(response => {
                    this.addressList = response.data.data;
                });
        },
        toAddAddress() {
            this.$router.push('/addUserAddress');
        },
        selectAddress(addr) {
            this.deliveryaddress = addr;
            this.showAddressDialog = false;
        },
        toPayment() {
            if (this.deliveryaddress == null) {
                alert('请选择送货地址！');
                return;
            }

            const order = {
                business: { id: this.businessId },
                deliveryAddress: { id: this.deliveryaddress.id },
                customer: this.customer,
                orderState: 0
            };

            this.$axios.post('/orders', order)
                .then(response => {
                    let orderData = response.data.data;
                    if (orderData && orderData.id > 0) {
                        this.$axios.delete(`/carts/${this.customer.id}`).then(() => {
                            this.$router.push({ path: '/orderList' });
                        });
                    } else {
                        alert('创建订单失败！');
                    }
                }).catch(error => {
                    console.error(error);
                });
        }
    }
}
</script>
<style scoped>
/****************** 总容器 ******************/
.wrapper {
    width: 100%;
    height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-btn {
    position: absolute;
    left: 3vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4vw;
    cursor: pointer;
    color: #fff;
    z-index: 1001;
    padding: 0 1vw;
    user-select: none;
}

/****************** 订单信息部分 ******************/
.wrapper .order-info {
    /*注意这里，不设置高，靠内容撑开。因为地址有可能折行*/
    width: 100%;
    margin-top: 12vw;
    background-color: #0097EF;
    box-sizing: border-box;
    padding: 2vw;
    color: #fff;
}

.wrapper .order-info h5 {
    font-size: 3vw;
    font-weight: 300;
}

.wrapper .order-info .order-info-address {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    user-select: none;
    cursor: pointer;
    margin: 1vw 0;
}

.wrapper .order-info .order-info-address p {
    width: 90%;
    font-size: 5vw;
}

.wrapper .order-info .order-info-address i {
    font-size: 6vw;
}

.wrapper .order-info p {
    font-size: 3vw;
}

.wrapper h3 {
    box-sizing: border-box;
    padding: 3vw;
    font-size: 4vw;
    color: #666;
    border-bottom: solid 1px #DDD;
}

/****************** 订单明细部分 ******************/
.wrapper .order-detailed {
    width: 100%;
}

.wrapper .order-detailed li {
    width: 100%;
    height: 16vw;
    box-sizing: border-box;
    padding: 3vw;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper .order-detailed li .order-detailed-left {
    display: flex;
    align-items: center;
}

.wrapper .order-detailed li .order-detailed-left img {
    width: 10vw;
    height: 10vw;
}

.wrapper .order-detailed li .order-detailed-left p {
    font-size: 3.5vw;
    margin-left: 3vw;
}

.wrapper .order-detailed li p {
    font-size: 3.5vw;
}

.wrapper .order-deliveryfee {
    width: 100%;
    height: 16vw;
    box-sizing: border-box;
    padding: 3vw;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 3.5vw;
}

/****************** 订单合计部分 ******************/
.wrapper .total {
    width: 100%;
    height: 14vw;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
}

.wrapper .total .total-left {
    flex: 2;
    background-color: #505051;
    color: #fff;
    font-size: 4.5vw;
    font-weight: 700;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper .total .total-right {
    flex: 1;
    background-color: #38CA73;
    color: #fff;
    font-size: 4.5vw;
    font-weight: 700;
    user-select: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.address-dialog-mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.address-dialog {
    background: #fff;
    border-radius: 16px;
    padding: 32px 24px;
    min-width: 320px;
    max-width: 90vw;
    box-shadow: 0 8px 32px #aaa;
}

.address-dialog h3 {
    font-size: 22px;
    color: #0097FF;
    text-align: center;
    margin-bottom: 18px;
}

.address-item {
    padding: 16px 0;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s;
}

.address-item:hover {
    background: #f5faff;
}

.address-main {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-bottom: 4px;
}

.address-contact {
    font-size: 14px;
    color: #666;
}

.dialog-btn {
    margin-top: 22px;
    background: #0097FF;
    color: #fff;
    border: none;
    padding: 10px 32px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

.address-empty {
    text-align: center;
    color: #888;
    padding: 12px 0;
}

.dialog-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 12px;
}

.dialog-btn.secondary {
    background: #e9ecef;
    color: #333;
}
</style>